<template>
<view>
<!--<import src="../../../utils/regions/regions.wxml"></import>-->

<view class="container">
    <form @submit="submitSupplier">
        <view class="item">
            <view class="item-name">姓名:</view>
            <input class="item-input" name="suppliers_contacts" value></input>
        </view>
        <view class="item">
            <view class="item-name">电话:</view>
            <input class="item-input" name="suppliers_phone" type="number" value></input>
        </view>
        <view class="item" data-id="0" @tap="openRegionsModal">
            <view class="item-name">所在地区:</view>
            <view class="item-input">{{address.province_name}} {{address.city_name}} {{address.district_name}} {{address.twon_name}}</view>
            <view class="item-img">
                <image class="arrow" src="/static/images/icon-arrowdown.png"></image>
            </view>
        </view>
        <view class="address-btns">
            <button class="submit-btn" form-type="submit">提 交</button>
        </view>
    </form>
</view>

<!-- 选择地址弹框  -->
<block data-type="template" data-is="regions" data-attr="regions">
    <!-- 选择地址弹框  -->
    <view :hidden="!regions.showRegionsModal">
        <view class="cover-layer" @tap="closeRegionsModal"></view>
        <view class="regions">
            <view v-for="(item, index) in regions.regions" :key="index" class="region" :data-id="item.id" :data-name="item.name" @tap="openRegionsModal">{{item.name}}</view>
        </view>
    </view>
</block>
</view>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
import Regions from "../../../utils/regions/Regions";

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      address: {} //收货地址信息

    };
  },

  components: {},
  props: {},
  onLoad: function () {
    this.initRegions();
  },
  methods: {
    /** 初始化区域弹框相关 */
    initRegions: function () {
      var that = this;
      new Regions(this, 'regions', {
        endAreaLevel: 2,
        endAreaLevelCall: function (parentId, regionName, address) {
          Object.assign(that.address, address);
          that.setData({
            'address.province_name': that.address.province_name,
            'address.city_name': that.address.city_name,
            'address.district_name': that.address.district_name,
            'address.twon_name': that.address.twon_name
          });
        }
      });
    },
    submitSupplier: function (e) {
      if (!e.detail.value.suppliers_contacts || !e.detail.value.suppliers_phone || !this.address.province || !this.address.city) {
        return app.globalData.showTextWarining('请补全信息');
      }

      request.post('/api/supplier/add_supplier', {
        data: {
          suppliers_contacts: e.detail.value.suppliers_contacts,
          suppliers_phone: e.detail.value.suppliers_phone,
          province_id: this.address.province,
          city_id: this.address.city
        },
        success: function (res) {
          app.globalData.showSuccess(res.data.msg, function () {
            uni.navigateBack();
          });
        }
      });
    }
  }
};
</script>
<style>
page{
    background: white;
}
.item{
    float: left;
    padding: 0 30rpx; 
    width: 100%;
    box-sizing: border-box;
    font-size: 30rpx;
    border-bottom: 1rpx solid #f3f3f3;
    line-height: 100rpx;
    height: 100rpx;
    position: relative;
}
.item-name{
    float: left;
}
.item-input{
    float: left;
    height: 100rpx;
    width: 450rpx;
    margin-left: 20rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item-switch{
    float: right;
}
.arrow{
    position: absolute;
    right: 30rpx;
    width: 32rpx;
    height: 32rpx;
    padding-top: 30rpx;
}
.address-btns{
    position: absolute;
    bottom: 80rpx;
    width: 100%;
    padding: 10rpx 0;
    text-align: center;
}
.submit-btn{
    width: 40%;
    background-color: #ff6a00;
    color: white;
    border-radius: 10rpx;
}
/* 区域选择弹框 */
@import "../../../utils/regions/regions.css"; 
</style>